<template>
	<view class="details">
		<!-- https://img.aibbyp.com/wechatUser/category1/icon1.png -->
		<u-tabs v-if="userInfo.level == 3" :list="list" :is-scroll="false" active-color="#FD5241" v-model="current"
			@change="changeTabs"></u-tabs>
		<block v-if="current == 0">
			<view class="pl32 pr32">
				<view class="flex_ac mt32">
					<view class="f40 fb ">
						<block v-if="option.me == 'true'">
							<view v-if="data.status == 0">已抢单!</view>
							<view v-if="data.status == 1">进行中!</view>
							<view v-if="data.status == 2">待验收!</view>
							<view v-if="data.status == 3">已完成!</view>
							<view v-if="data.status == 4">已取消!</view>
						</block>
						<block v-else>
							<view v-if="data.status == 0">待接单!</view>
							<view v-if="data.status == 1">已接单!</view>
							<view v-if="data.status == 2">已完成!</view>
						</block>

					</view>

					<view v-if="option.me == 'true' && data.status == 0">
						<u-tag class="ml24" @click="quxiaojiedan(data)" type="error" shape="circle" text='取消订单'>

						</u-tag>
					</view>
				</view>
				<view class="f32 fb mt24 bac mt36">

					<view class="">
						<text class="">
							价格：
						</text>
						<text class="cf64">￥ {{data.price}}</text>
					</view>
					<view class="mt24">
						施工时间 ：<text class="cf64">{{data.start_date_text}} ~ {{data.end_date_text}}</text>
					</view>
				</view>
				<view class="">
					<view class="bac mt36">
						<view class="f32 fb">
							客户信息
						</view>
						<view class="flex f28 fb mt32">
							<view class="">
								{{data.name}}
							</view>
							<view class="ml32">
								{{data.mobile}}
							</view>
						</view>
						<view class="flex_y_center mt24"
							@click="$wanlshop.goAddress(data.lat,data.lon,'',data.address)">
							<u-icon name="map-fill" color="#FD5241"></u-icon>
							<view class="c3d ml24 flex1 overflow_1">
								{{data.address}}
							</view>
							<image class="dh ml24" src="https://img.aibbyp.com/wechat/images/dh.png" mode=""></image>
						</view>
					</view>
					<view class="bac mt36">

						<view class="f32 fb ">
							服务信息
						</view>
						<view class="flex_ac mt24">
							<u-icon v-if='data.level == 3' name="https://img.aibbyp.com/wechatUser/jiazhuang.png"
								size="60"></u-icon>
							<u-icon v-if='data.level == 2' name="https://img.aibbyp.com/wechatUser/gongzhuang.png"
								size="60"></u-icon>
							<view class="f28 fb ml12">
								{{data.title}}
							</view>
						</view>
						<view class="f28 mt24">
							类型：
							<text class="error fb" v-if="data.type == 1">整装</text>
							<text class="error fb" v-if="data.type == 2">局部改造</text>
							<text class="error fb" v-if="data.type == 3">维修</text>
						</view>
						<view class="f28 mt24">
							装修面积 ：<text class="warning fb">{{data.worker_area}}</text>
						</view>
						<view class="f28 mt24 fb">
							问题图片
						</view>
						<view class="flex flex_warp mt24">
							<block v-for="(i,k) in data.images" :key="k">
								<image class="imgs mt20 mr16" :src="$wanlshop.oss(i)" @click="previewImage(k)" mode="">
								</image>
							</block>
						</view>
						<view class="f28 mt32 fb" v-if='data.video'>
							问题视频
						</view>
						<view class="flex_sb flex_warp mt24" v-if='data.video'>
							<video :src="data.video" class="videoMp4"
								:class="{'videoMp4HM':userInfo.systemType == '鸿蒙'}"></video>
						</view>
						<view class="f28 mt32 fb">
							服务描述
						</view>
						<view class="f28">
							{{data.describe}}
						</view>
					</view>


				</view>
				<view class="tjsp mt32" :class="{'tjsp1':shopListData.length<4}">
					<view class="tar cf f24 " @click="$wanlshop.to('/pages/homeRecommend/classify/category')">
						更多商品 <u-icon class="ml8" name="arrow-right" size="22"></u-icon>
					</view>
					<view class="bac mt32 flex1 mb16">
						<view class="flex  flex-wrap" style="height: 100%">
							<view class="forBox1  mt12 mb12" v-for="(item,key1) in shopListData.slice(0,8)" :key="key1"
								@click="$wanlshop.to('/pages/product/goods?id='+item.id)">
								<view class="f24" style="position: relative;height: 100%">
									<image class="img1" :src="$wanlshop.oss(item.image)" mode=""></image>
									<view class="c3d overflow_1 mt12">
										{{item.title}}
									</view>
									<view class="error mt12 f20 flex_sb">
										<view class="">
											￥{{item.price}}
										</view>
									</view>
									<view class="cf f20 pl4 pr4"
										style="position: absolute;right: 0;top: 0;background: #000;opacity: 0.5;border-radius: 0 8rpx 0 8rpx;">
										{{item.distance}}km
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
				<view class="bac mt32">
					<view class="f32 fb">
						订单详情
					</view>
					<view class="flex_ac f24 mt32" v-if="data.order_no">
						<view class="c6" style="width: 160rpx;">
							订单编号：
						</view>
						<view class="c3d" @click="copyText(data.order_no)">
							{{data.order_no}} | 复制
						</view>
					</view>
					<view class="flex_ac f24 mt32" v-if="data.start_date_text">
						<view class="c6" style="width: 160rpx;">
							创建时间：
						</view>
						<view class="c3d">
							{{data.start_date_text}}
						</view>
					</view>
					<view class="flex_ac f24 mt32" v-if="false">
						<view class="c6" style="width: 160rpx;">
							付款时间：
						</view>
						<view class="c3d">
							{{data.end_date_text}}
						</view>
					</view>
				</view>
			</view>

			<view class="lxsf flex_y_center flex_x_center" v-if="false">
				<image class="imglt" src="https://img.aibbyp.com/wechatUser/category1/lt.png" mode=""></image>
				<view class="c3d ml20 f28">
					联系师傅
				</view>
			</view>
			<view class="lxsf flex_y_center flex_x_center"
				v-if="option.me == 'true' && data.status!=4 && userInfo.id == data.user_id">
				<u-button size="default" shape="circle" type="error" class="flex1"
					@click="$wanlshop.to('/pages/craftsman/dingdanjindu?id=' + data.id)">
					订单进度
				</u-button>
				<u-button v-if="data.status == 1 && userInfo.id == data.user_id" size="default" class="ml24 flex1"
					shape="circle" type="primary"
					@click="$wanlshop.to('/pages/craftsman/company/recruitingCraftsmen?id=' + data.id)">招募工匠</u-button>
			</view>
			<view class="lxsf flex_y_center flex_x_center"
				v-if="option.me == 'null' && data.status !=0 && userInfo.id == data.user_id">
				<u-button size="default" shape="circle" type="error" class="flex1"
					@click="$wanlshop.to('/pages/craftsman/dingdanjindu?id=' + data.id)">
					订单进度
				</u-button>
				<u-button v-if="data.status == 1  && userInfo.id==data.user_id && userInfo.level == 3" size="default"
					plain shape="circle" type="primary" class="flex1 ml24"
					@click="$wanlshop.to('/pages/craftsman/company/recruitingCraftsmen?id=' + data.id)">
					招募工匠</u-button>
			</view>
			<view class="lxsf flex_y_center flex_x_center" v-if="option.me == 'null' && data.status == 0">
				<view class="c3d ml20 f28 qxdd" @click="lijiqiangdan(data)">
					立即抢单
				</view>
			</view>
		</block>
		<block v-if="current == 1">
			<block v-if="data1.length > 0">
				<view class="u-p-t-32 bac mt24" v-for="(goods, index) in data1" :key="index">
					<!-- 商品选择 -->
					<view class="forbox wanl-cart-goods u-flex-col padding-bj" style="align-items: stretch;">

						<view class="flex_ac">
							<u-icon v-if='goods.level == 3' name="https://img.aibbyp.com/wechatUser/jiazhuang.png"
								size="60"></u-icon>
							<u-icon v-if='goods.level == 2' name="https://img.aibbyp.com/wechatUser/gongzhuang.png"
								size="60"></u-icon>
							<view class="f32 fb ml12">
								{{goods.worker_type_text.name}}
							</view>
							<u-tag v-if='goods.type == 1' class="ml12" text="整装" size="mini" mode="plain" />
							<u-tag v-if='goods.type == 2' class="ml12" text="局部改造" size="mini" mode="plain" />
							<u-tag v-if='goods.type == 3' class="ml12" text="维修" size="mini" mode="plain" />
							<view class="info flex1 tar f28 fb" v-if="goods.status == 0">
								待支付
							</view>
							<view class="cf64 flex1 tar f28 fb" v-if="goods.status == 1">
								招募中
							</view>
							<view class="primary flex1 tar f28 fb" v-if="goods.status == 2">
								招募完成
							</view>
							<view class="primary flex1 tar f28 fb" v-if="goods.status == 3">
								已取消
							</view>
						</view>

						<view class="flex mt24 c3d f28 ">
							<image v-if="goods.images &&goods.images[0]" class="goodsimg"
								:src="$wanlshop.oss(goods.images[0])" mode="">
							</image>
							<view class="ml24 flex1 minwidth f24">
								<scroll-view scroll-x="true" class="scroll-Y">
									<view class="flex">
										<view class="tags" v-for="(item,key) in goods.label" :key="key">
											{{item}}
										</view>
									</view>
								</scroll-view>
								<view class="mt12 overflow_1">
									<u-icon name="map" color="#FD5241" size="28"></u-icon>
									<text class="ml16 f28 c3d">
										{{goods.address}}
									</text>
								</view>
								<view class="mt12">
									<u-icon name="clock" color="#FD5241" size="28"></u-icon>
									<text class="ml16 f28 c3d">
										{{goods.start_date_text}} ~ {{goods.end_date_text}}
									</text>
								</view>
							</view>
						</view>
						<view class="flex_sb mt24 flex_ac">
							<view class="mt8">

								<view class="cf64 fb f32">
									总价：￥{{goods.price}}
								</view>
							</view>
							<view class="">

								<u-button class="ml12" type="info" size="mini" shape="circle" plain
									@click.stop="quxiao(goods,index)">取消</u-button>
								<u-button class="ml12" type="primary" size="mini" shape="circle" plain
									@click.stop="chakan(goods, index)">查看招募</u-button>
							</view>
						</view>

					</view>
				</view>
			</block>
			<wanl-empty v-else text="暂无招募信息" />
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopListData: [],
				data1: [],
				userInfo: uni.getStorageSync('wanlshop:user'),
				current: 0,
				list: [{
						name: '订单详情'
					},
					{
						name: '招募信息'
					},
				],
				data: {},
				option: {
					me: null,
					id: '',
				},
			}
		},
		onLoad(option) {
			this.option = option
			console.log(option);
			this.getlists()
			if (option.id) {
				if (option.me == 'true') {
					this.meGetData(option.id)
					return
				}
				this.getData(option.id)

			}
		},
		mounted() {},
		methods: {

			copyText(text) {
				uni.setClipboardData({
					data: text,
					success: () => {
						this.$wanlshop.msg('已复制')
					},
					fail: (err) => {
						this.$wanlshop.msg('复制失败')
					}
				});
			},
			getlists() { //获取秒送数据
				this.$api.get({
					url: '/wanlshop/product/lists',
					data: {
						sort: 'distance',
						filter: {
							"is_send": "1"
						},
						op: {
							"is_send": "="
						},
						page: '1',
						limit: '8',
					},
					success: res => {
						this.shopListData = res.data
					}
				})
			},
			chakan(data, index) {
				this.$wanlshop.to('/pages/craftsman/company/recruit?recruit=1&id=' + data.id)
			},
			quxiao(data, index) {
				this.$api.post({
					url: '/worker/recruit/cancelRecruit',
					data: {
						id: data.id
					},

				}).then(res => {
					this.orderDetail(this.order_ids)
					this.$wanlshop.msg('操作成功')
				})
			},
			getRecruitNowList() {
				this.$api.post({
					url: '/worker/recruit/getRecruitNowList',
					data: {
						id: this.data.id
					}
				}).then(res => {
					this.data1 = res
				})
			},
			checkboxGroupChange() {},
			quxiaojiedan(data, index) { //取消订单
				this.$api.post({
					url: '/worker/task/cancelOrder',
					data: {
						order_id: data.id
					},
					success: res => {
						this.$wanlshop.msg('操作成功')
						this.meGetData(this.option.id)
					}
				})
			},
			lijiqiangdan(item, index) {
				this.$api.post({
					url: '/worker/task/grabOrder',
					data: {
						id: item.id
					},
					loadingTip: '抢单中...',
					success: res => {
						this.$wanlshop.to('/pages/craftsman/qiangdanchenggong?id=' + res.order_id)
						// this.$wanlshop.msg('抢单成功')
					},
					fail: error => {

					}
				})
			},

			changeTabs() {
				console.log(1);
			},
			getData(id) {
				this.$api.post({
					url: '/worker/task/taskDetail',
					data: {
						id: id
					},
					loadingTip: '加载中...',

				}).then(res => {
					if (res.video) {
						res.video = this.$wanlshop.oss(res.video)
					}
					this.data = res
				})
			},

			meGetData(id) {
				this.$api.post({
					url: '/worker/task/orderDetail',
					data: {
						order_id: id
					},
				}).then(res => {
					if (res.video) {
						res.video = this.$wanlshop.oss(res.video)
					}
					this.data = res
					this.getRecruitNowList()
				})
			},
			previewImage(k) {
				let imgArr = []
				uni.previewImage({
					urls: imgArr,
					current: 1,
					indicator: 'number'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tjsp1 {
		height: 424rpx;
		background-size: 100% 180%;
	}

	.tjsp {
		height: 704rpx;
		width: 686rpx;
		background-image: url('https://img.aibbyp.com/wechatUser/ass.png');
		background-size: 100% 100%;
		border-radius: 12rpx;
		padding: 22rpx 26rpx;
		display: flex;
		flex-direction: column;

		.forBox1:nth-child(4n) {
			margin-right: 0;
		}

		.forBox1 {
			margin-right: 2.5%;
			width: 23%;
			height: 50%;

			.img1 {
				width: 100%;
				height: calc(100% - 120rpx);
				border-radius: 12rpx !important;

			}
		}
	}

	.goodsimg {
		width: 180rpx;
		height: 180rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.tags {
		background: #E9F0FC;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 4rpx 10rpx;
		margin-right: 8rpx;
		font-size: 20rpx;
		margin-bottom: 8rpx;
		white-space: nowrap;
	}

	.details {
		line-height: normal;
		background-repeat: no-repeat;
		width: 100%;
		overflow: hidden;
		// background-image: url('https://img.aibbyp.com/wechatUser/category1/gjrzbjc.png');
		background-size: 100% 100%;
		padding-bottom: 160rpx;

		.current1Box {
			padding: 20rpx 30rpx;
			width: 100%;

			.qdxz {
				width: 750rpx;
				height: 166rpx;
				position: fixed;
				bottom: 0;
				left: 0;
				background: #FFFFFF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				padding: 20rpx 74rpx 0;

				.btn {
					width: 632rpx;
					height: 80rpx;
					background: #3583F0;
					text-align: center;
					line-height: 80rpx;
					border-radius: 200rpx 200rpx 200rpx 200rpx;
					font-size: 40rpx;
					color: #FFFFFF;
				}
			}

			::v-deep .u-checkbox {
				width: 100% !important;
				width: 100%;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin-top: 20rpx;
				flex-direction: row-reverse;
				padding-right: 40rpx;

				.u-checkbox__label {
					width: 100%;
				}
			}

			.checkboxBox {
				width: 100%;
			}
		}

		.bac {


			.img {
				width: 76rpx;
				height: 76rpx;
				border-radius: 50%;
			}

		}




		.imglt {
			width: 48rpx;
			height: 48rpx;
		}

		.lxsf {
			background: #fff;
			height: 140rpx;
			width: 100%;
			position: fixed;
			bottom: 0;
			padding-bottom: env(safe-area-inset-bottom);
			z-index: 2;
			padding: 20rpx;
		}

		.qxdd {
			background: #FD5241;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			font-size: 40rpx;
			color: #FFFFFF;
			font-weight: bold;
			width: 632rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
		}

		.videoMp4 {
			width: 100%;
			object-fit: contain;
			min-height: 450;
			height: auto;
		}

	

		.bac {
			background: #fff;
			border-radius: 12rpx;
			padding: 24rpx 32rpx;
		}

		.icons {
			width: 56rpx;
			height: 56rpx;
		}

		.dh {
			width: 32rpx;
			height: 32rpx;
		}

		.imgs {
			height: 180rpx;
			width: 180rpx;
			border-radius: 12rpx;
		}
	}
</style>